@import './common';

page{
	box-sizing:border-box;
	padding:setSize(24);
	background-color:#F8F8F8;
}

.form-wrap{
	box-sizing:border-box; 
	padding:setSize(0) setSize(25) setSize(28);
	background-color: #edeff3;

	.form-box{
		width: 100%;
		box-sizing:border-box;
		padding:setSize(50) setSize(40);
		background-color: #fff;
		box-shadow:setSize(0) setSize(3) setSize(7) setSize(0) rgba(0, 0, 0, 0.35);
		border-radius:setSize(10);

		.input-box{
			box-sizing:border-box;
			padding:setSize(6) setSize(20);
			border:setSize(2) solid rgba(191,191,191,1);
			border-radius:setSize(10);

			.input{
				display: block;
				width: 100%;
			}
		}

		.btn{
			width:setSize(160);
			height:setSize(60);
			line-height: setSize(60);
			margin-left: setSize(20);
			background:$mainColor;
			border-radius:setSize(100);
			text-align: center;
			color: #fff;
			font-size: setSize(30);
		}

		.tags{
			margin-top: setSize(30);

			.tag-default{
				box-sizing:border-box;
				padding:setSize(2) setSize(20);
				margin-right: setSize(20);
				margin-bottom: setSize(20);
				background:#fff;
				border:setSize(1) solid $mainColor;
				border-radius:setSize(100);
				font-size: setSize(30);
				text-align: center;
				color: $mainColor;
			}

			.tag{
				background:$mainColor;
				color: #fff;
			}
		}
	}
}

.lists-wrap{

	.lists{
		background-color:#fff;
		margin-bottom: setSize(20);
		border-radius:setSize(8);

		.list-top{
			box-sizing:border-box;
			padding: setSize(24);

			.img-wrap{
				position: relative;
				width: setSize(204);
				height: setSize(144);
				margin-right: setSize(24);

				.img-box{

					.img{
						display: block;
						width: 100%;
						height:setSize(144);
						border-radius:setSize(8);
					}
				}

				.tag{
					position:absolute;
					top: 0;
					left: 0;
					max-width: 100%;
					height:setSize(38);
					line-height: setSize(38);
					box-sizing:border-box;
					padding:0 setSize(20);
					background:rgba(0,0,0,0.5);
					border-radius:setSize(8) setSize(4) setSize(4) setSize(0);
					font-size:setSize(20);
					font-weight:500;
					color:rgba(255,255,255,1);
					@include ellipsis;
				}
			}

			.section{
				@include ellipsis;

				.title{
					height:setSize(40);
					line-height:setSize(40);
					font-size:setSize(30);
					font-weight:500;
					color:rgba(51,51,51,1);
					@include ellipsis;
				}

				.sub-title{
					height:setSize(33);
					line-height:setSize(33);
					padding:setSize(16) 0;
					font-size:setSize(24);
					font-weight:400;
					color:rgba(112,112,112,1);
					@include ellipsis;

					.gym,.addr{
						@include ellipsis;
					}
				}

				.cost-box{

					.unit{
						width:setSize(26);
						font-size:setSize(24);
						font-weight:500;
						color:rgba(250,107,47,1);
						text-align: center;
					}

					.cost{
						font-size:setSize(36);
						font-weight:500;
						color:rgba(250,107,47,1);
					}
				}

				.status{
					width:setSize(88);
					height:setSize(34);
					line-height: setSize(34);
					border-radius:setSize(17);
					border:setSize(1) solid rgba(112,112,112,1);
					font-size:setSize(22);
					font-weight:400;
					color:rgba(112,112,112,1);
					text-align: center;
				}
			}

			.out{

				.img{
					display: block;
					width:setSize(46);
					height:setSize(46);
					border-radius:50%;
				}
			}
		}
	}
}

.foot-btns-wrap{
	height: setSize(40*2 + 94);

	.foot-btns{
		position:fixed;
		bottom:0;
		left: 0;
		z-index: 1;
		width: 100%;
		box-sizing:border-box;
		padding:0 setSize(24) setSize(40);

		.foot-btn{
			height:setSize(94);
			line-height:setSize(94);
			border-radius:setSize(100);
			font-size:setSize(34);
			font-weight:500;
			text-align: center;
			color:#fff;
			background:$mainColor;
		}
	}
}